import React, { useEffect, useMemo } from "react";
import HistogramEchart from "./histogramEchart";
import styled from "styled-components";
import { Table } from "antd";
import useReducer from "src/hooks/useReducer";
const StyleTable = styled(Table)`
  padding-top: 45px;
  /* .ant-table-thead {
        background-color: pink;
    } */
  .ant-table-thead {
    .ant-table-cell {
      background-color: #ccc;
    }
  }
`;
const ItemStyle = styled.div`
  cursor: pointer;
  position: relative;
  .active::after {
    position: absolute;
    content: "";
    bottom: -40px;
    width: 25px;
    height: 15px;
    left: 41%;
    background-color: yellow;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
`;
export const columns = [
  {
    title: "小学",
    dataIndex: "xx",
    width: 50,
  },
  {
    title: "初中",
    dataIndex: "cz",
    width: 50,
  },
  {
    title: "高中",
    dataIndex: "gz",
    width: 50,
  },
  {
    title: "大学",
    dataIndex: "dx",
    width: 50,
  },
  {
    title: "大一",
    dataIndex: "dy",
    width: 50,
  },
  {
    title: "大二",
    dataIndex: "dr",
    width: 50,
  },
  {
    title: "大三",
    dataIndex: "ds",
    width: 50,
  },
  {
    title: "大四",
    dataIndex: "dds",
    width: 50,
  },
  {
    title: "实习",
    dataIndex: "sx",
    width: 50,
  },
];
export const echartData = [
  {
    name: "小学",
    value: 5,
  },
  {
    name: "初中",
    value: 20,
  },
  {
    name: "高中",
    value: 36,
  },
  {
    name: "大学",
    value: 10,
  },
  {
    name: "大一",
    value: 12,
  },
  {
    name: "大二",
    value: 20,
  },
  {
    name: "大三",
    value: 36,
  },
  {
    name: "大四",
    value: 10,
  },
  {
    name: "实习",
    value: 10,
  },
];
const data = [
  {
    xx: 5,
    cz: 20,
    gz: 36,
    dx: 10,
    dy: 12,
    dr: 20,
    ds: 36,
    dds: 10,
    sx: 10,
  },
];

export default function ChartContentBox({ switchType }) {
  const [state, dispatch] = useReducer({
    selectedObj: "小学",
    currIndex: 0,
  });
  const { selectedObj, currIndex } = state;

  const renderItem = (value, record) => {
    return (
      <ItemStyle
        onClick={() => {
          if (selectedObj !== record) {
            dispatch({
              selectedObj: record,
            });
          } else {
            dispatch({
              selectedObj: "",
            });
          }
        }}
      >
        <div className={record === selectedObj ? "active" : "no-active"}>
          {value}
        </div>
      </ItemStyle>
    );
  };

  useEffect(() => {
    //   column.forEach( (i,index) => {

    //       if(i.title === selectedObj) {

    //          dispatch({
    //             currIndex: index
    //          })
    //          return;
    //       }
    //   })
    let h = column.findIndex((c) => c.title === selectedObj);
    dispatch({
      currIndex: h > -1 ? h : -1,
    });
  }, [selectedObj]);
  const column = useMemo(() => {
    const column = [];
    columns.forEach((i) => {
      column.push({
        title: i.title,
        dataIndex: i.dataIndex,
        width: i.width,
        align: "center",
        render: (text) => renderItem(text, i.title),
      });
    });
    return column;
  }, [selectedObj]);

  return (
    <div style={{ height: "270px" }}>
      {switchType === "1" ? (
        <HistogramEchart
          currIndex={currIndex}
          itemClick={(params = null) => {
            if (params) {
              dispatch({
                selectedObj: params[`name`],
              });
            } else {
              dispatch({
                selectedObj: "",
                currIndex: -1,
              });
            }
          }}
        />
      ) : (
        <StyleTable columns={column} dataSource={data}></StyleTable>
      )}
    </div>
  );
}
